<template>
    <div class="page">
        <div class="header">
            <img class="logo" src="@/assets/logo.png" alt="" />
            <img class="language" src="@/assets/EN-17.png" v-if="locale == 'zh-CN'" alt="" @click="toggleLang()" />
            <img class="language" src="@/assets/CH-17.png" v-else alt="" @click="toggleLang()" />
        </div>
        <div class="search">
            <div class="title">{{ $t("sou-suo-jiu-dian") }}</div>
            <div class="input_box">
                <input
                    class="input"
                    type="text"
                    :placeholder="$t('qing-shu-ru-jiu-dian-ming-cheng-huo-jiu-dian-dai-ma')"
                    v-model="params.key"
                />
                <img class="search_btn" src="@/assets/search_btn.png" alt="" @click="handleSearchInput" />
            </div>
        </div>
        <div class="list" @scroll="handleScroll">
            <template v-if="hotelList.length">
                <div class="item" v-for="(item, index) in hotelList" :key="index" @click="handleToOwnerList(item)">
                    <img class="hotel_icon" src="@/assets/hotel.png" alt="" />
                    {{
                        locale == "zh-CN"
                            ? item.holidex + " - " + item.hotel_name_zh
                            : item.holidex + " - " + item.brand + " " + item.hotel_name
                    }}
                </div>
            </template>
            <div v-else class="empty"><van-empty :description="$t('mei-you-geng-duo-shu-ju-le')" /></div>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { search_hotel } from "@/api/searchHotel";
import { showLoadingToast, showToast, Empty } from "vant";
import { useLanguage } from "@/hooks/useLanguage";
import { useRouter } from "vue-router";
const router = useRouter();
const { toggleLang, locale, t } = useLanguage();

//去业主列表
const handleToOwnerList = (item) => {
    sessionStorage.setItem("hotel_info", JSON.stringify(item));
    //跳转
    router.push("/OwnerList");
};

//酒店列表
const hotelList = ref([]);
const total = ref(0);
const loading = ref(false); // 添加加载状态
const params = ref({
    page: 1,
    pagesize: 20,
    key: "",
});

//查询酒店
const searchHotel = async () => {
    // 防止重复请求
    if (loading.value) return;

    loading.value = true;
    let slt = "";
    try {
        slt = showLoadingToast({
            message: t("jia-zai-zhong"),
            forbidClick: true,
        });
        const res = await search_hotel(params.value);
        console.log(res);
        if (res.data.hotel_info.data.length == 0) {
            showToast(t("mei-you-geng-duo-shu-ju-le"));
            return;
        }
        hotelList.value = hotelList.value.concat(res.data.hotel_info.data);
        total.value = res.data.hotel_info.total;
    } finally {
        loading.value = false;
        slt.close();
    }
};

//搜索
const handleSearchInput = () => {
    params.value.page = 1;
    hotelList.value = [];
    searchHotel();
};

//滚动加载
const handleScroll = (e) => {
    const { scrollTop, scrollHeight, clientHeight } = e.target;
    // 添加防抖，避免频繁触发
    if (loading.value) return;

    // 留出一定提前距离触发加载
    if (scrollTop + clientHeight >= scrollHeight - 10) {
        console.log(params.value.page * params.value.pagesize, total.value);
        if (params.value.page * params.value.pagesize < total.value) {
            params.value.page++;
            searchHotel();
        } else {
            showToast(t("mei-you-geng-duo-shu-ju-le"));
        }
    }
};

onMounted(() => {
    searchHotel();
});
</script>
<style lang="scss" scoped>
.page {
    width: 100%;
    height: 100vh;
    background-image: url("@/assets/bg.png");
    background-size: cover;
    background-repeat: no-repeat;
    padding: 0 0.4rem;
}
.header {
    width: 100%;
    height: 1.52rem;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .logo {
        width: 2.48rem;
        height: 0.44rem;
    }

    .language {
        width: 1.0667rem;
        height: 0.4533rem;
    }
}

.search {
    width: 100%;
    height: 2.8533rem;
    background-image: url("@/assets/search_bg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 0 0.4rem;
    margin-bottom: 0.2667rem;

    .title {
        width: 100%;

        font-weight: bold;
        font-size: 0.5067rem;
        color: #ffffff;
        padding-top: 0.3333rem;
        padding-left: 1.6rem;
    }

    .input_box {
        width: 100%;
        height: 1.1733rem;
        margin-top: 0.4rem;
        position: relative;
        display: flex;
        align-items: center;

        .input {
            width: 100%;
            height: 1.1733rem;
            background: #ffffff;
            border-radius: 0.5867rem;
            border: 0.0533rem solid #e8542c;
            outline: none;
            text-indent: 1em;

            font-weight: 400;
            font-size: 0.4rem;
            color: #999999;
        }

        .search_btn {
            width: 0.8rem;
            height: 0.8rem;
            position: absolute;
            right: 0.2667rem;
            bottom: 50%;
            transform: translateY(50%);
        }
    }
}

.list {
    width: 100%;
    height: calc(100vh - 1.52rem - 2.8533rem - 0.2667rem);
    overflow: auto;

    .item {
        width: 100%;
        min-height: 1.6rem;
        background: #ffffff;
        border-radius: 0.3467rem;
        margin-bottom: 0.4rem;
        padding: 0.5333rem;
        display: flex;
        align-items: center;
        font-weight: 500;
        font-size: 0.4267rem;
        color: #292929;
        line-height: 0.64rem;
        word-break: keep-all;

        .hotel_icon {
            width: 0.5467rem;
            height: 0.5333rem;
            margin-right: 0.2667rem;
        }
    }

    .empty {
        width: 100%;
        background-color: #fff;
        border-radius: 0.3467rem;
    }
}
</style>
